<template>
  <div class="authenticate_step_page" v-loading="pageLoading">
    <!-- <Head /> -->
     <div class="page_content">
      <ul class="step_list">
        <li class="step_item active">
          <div class="number_box">
            <img
              src="@/assets/authenticate/step_1_active.png"
              alt=""
              class="img"
              v-if="currentStep === 1"
            />
            <img
              src="@/assets/authenticate/step_success.png"
              alt=""
              class="img"
              v-if="currentStep > 1"
            />
            <div class="name">企业基础信息</div>
          </div>
          <div class="line" :class="{ blue: currentStep > 1 }"></div>
        </li>
        <li class="step_item">
          <div class="number_box">
            <img
              src="@/assets/authenticate/step_2.png"
              alt=""
              class="img"
              v-if="currentStep < 2"
            />
            <img
              src="@/assets/authenticate/step_2_active.png"
              alt=""
              class="img"
              v-if="currentStep === 2"
            />
            <img
              src="@/assets/authenticate/step_success.png"
              alt=""
              class="img"
              v-if="currentStep > 2"
            />
            <div class="name">企业管理员</div>
          </div>
          <div class="line" :class="{ blue: currentStep > 2 }"></div>
        </li>
        <li class="step_item">
          <div class="number_box">
            <img
              src="@/assets/authenticate/step_3.png"
              alt=""
              class="img"
              v-if="currentStep < 3"
            />
            <img
              src="@/assets/authenticate/step_3_active.png"
              alt=""
              class="img"
              v-if="currentStep === 3"
            />
            <img
              src="@/assets/authenticate/step_success.png"
              alt=""
              class="img"
              v-if="currentStep > 3"
            />
            <div class="name">银行账户验证</div>
          </div>
          <div class="line" :class="{ blue: currentStep > 3 }"></div>
        </li>
        <li class="step_item">
          <div class="number_box">
            <img
              src="@/assets/authenticate/step_4.png"
              alt=""
              class="img"
              v-if="currentStep < 4"
            />
            <img
              src="@/assets/authenticate/step_4_active.png"
              alt=""
              class="img"
              v-if="currentStep === 4"
            />
            <img
              src="@/assets/authenticate/step_success.png"
              alt=""
              class="img"
              v-if="currentStep > 4"
            />
            <div class="name">平台审核</div>
          </div>
          <!-- <div class="line"></div> -->
        </li>
      </ul>
      <div class="container">
        <div class="step_content step_1_content" v-if="currentStep === 1">
          <el-form
            ref="step1Form"
            label-position="right"
            :model="step1Form"
            :rules="step1Rules"
          >
            <div class="mod select_company_type">
              <div class="title">
                <i class="icon"></i>
                选择企业类型
              </div>
              <div class="company_type_list">
                <el-form-item prop="enterpriseType" style="width: 100%;">
                  <el-radio-group
                    v-model="step1Form.enterpriseType"
                    class="radio_group"
                  >
                    <div
                      class="company_type_item"
                      :class="{
                        active: step1Form.enterpriseType === item.value,
                      }"
                      v-for="item in companyTypeList"
                    >
                      <el-radio :label="item.value" class="radio">{{
                        item.name
                      }}</el-radio>
                      <el-tooltip :content="item.tip" placement="top">
                        <i
                          class="el-icon-info font_size_16"
                          :style="{
                            color:
                              step1Form.enterpriseType === item.value
                                ? '#68acff'
                                : '#c0c4cd',
                          }"
                        ></i>
                      </el-tooltip>
                    </div>
                  </el-radio-group>
                </el-form-item>
              </div>
            </div>
            <div class="mod company_base_msg">
              <div class="title">
                <i class="icon"></i>
                企业基础信息
              </div>
              <div class="content p_b_18">
                <div class="upload_box">
                  <el-form-item prop="businessPic" :error="businessPicError">
                    <div class="ying_ye_zhi_zhao" v-if="step1Form.businessPic">
                      <img :src="baseURL + step1Form.businessPic" alt="" class="img" />
                      <div class="mask">
                        <i
                          class="el-icon-search preview"
                          @click.stop="previewBigImg(step1Form.businessPic)"
                        ></i>
                        <i
                          class="el-icon-delete delete"
                          @click.stop="deleteBusinessPic"
                        ></i>
                      </div>
                    </div>
                    <div class="ying_ye_zhi_zhao" v-loading="businessPicLoading" v-else>
                      <input
                        type="file"
                        accept="image/jpeg,image/jpg,image/png"
                        class="upload_input"
                        @change="ocrComLicence"
                      />
                    </div>
                  </el-form-item>
                  <div class="desc_box">
                    <div class="desc_name">上传说明：</div>
                    <div class="desc_text">
                      <div>
                        营业执照请上传彩色原件或加盖企业公章的复印件（要求公章清晰完整）。
                      </div>
                      <div>
                        系统将自动识别证件信息营业执照限jpeg/jpg/png格式，且大小不超过10M。
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tips">
                  <i class="el-icon-warning icon"></i>
                  部分信息由图片自动识别，请仔细核对，如有出入请及时修正
                </div>
                <div class="company_base_msg_form">
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item label="企业名称" prop="enterpriseName">
                        <el-input v-model="step1Form.enterpriseName"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="统一社会信用代码" prop="creditCode">
                        <el-input v-model="step1Form.creditCode"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item label="法定代表人" prop="legal">
                        <el-input v-model="step1Form.legal"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="注册资本" prop="registered">
                        <el-input v-model="step1Form.registered">
                          <span slot="suffix" v-if="step1Form.registered === '' || step1Form.registered.indexOf('元') === 0">元</span>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item label="注册地址" prop="address">
                        <el-input v-model="step1Form.address"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="成立日期" prop="establishedDate">
                        <el-date-picker
                          v-model="step1Form.establishedDate"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          style="width: 100%"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item
                        label="有限期限"
                        :prop="step1Form.limitedLongEffect === false ? 'limited' : 'limitedLongEffect'"
                      >
                        <div class="limited_line">
                          <el-date-picker
                            v-model="step1Form.limited"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            style="width: 100%"
                            :disabled="step1Form.limitedLongEffect === true"
                          ></el-date-picker>
                          <el-checkbox
                            :disabled="step1Form.limitedLongEffect === false"
                            v-model="step1Form.limitedLongEffect"
                            class="limited_checkbox"
                          >长期有效</el-checkbox>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="公司类型" prop="enType">
                        <el-input v-model="step1Form.enType"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item label="公司性质" prop="property">
                        <el-select v-model="step1Form.property" style="width: 100%;">
                          <el-option value="">请选择</el-option>
                          <el-option
                            v-for="item in companyPropertyList"
                            :key="item.dictValue"
                            :value="item.dictLabel"
                          >{{ item.dictLabel }}</el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="行业分类" prop="industry">
                        <el-select v-model="step1Form.industry" style="width: 100%">
                          <el-option value="">请选择</el-option>
                          <el-option
                            v-for="item in industryList"
                            :key="item.dictValue"
                            :value="item.dictLabel"
                          >{{ item.dictLabel }}</el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item label="公司电话" prop="companyPhone">
                        <el-input v-model="step1Form.companyPhone"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="办公地址" prop="officeAddress">
                        <el-input v-model="step1Form.officeAddress"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="企业经营范围" prop="bfanwei">
                        <el-input
                          type="textarea"
                          v-model="step1Form.bfanwei"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
            <div class="mod company_legal_msg">
              <div class="title">
                <i class="icon"></i>
                企业法人信息
              </div>
              <div class="content p_b_18">
                <div class="upload_box">
                  <el-form-item prop="frContactRPic" :error="frContactRPicError">
                    <div class="ID_top" v-if="step1Form.frContactRPic">
                      <img class="img" :src="baseURL + step1Form.frContactRPic" />
                      <div class="mask">
                        <i
                          class="el-icon-search preview"
                          @click.stop="previewBigImg(step1Form.frContactRPic)"
                        ></i>
                        <i
                          class="el-icon-delete delete"
                          @click.stop="deleteFrContactRPic"
                        ></i>
                      </div>
                    </div>
                    <div class="ID_top" v-loading="frContactRPicLoading" v-else>
                      <input
                        type="file"
                        accept="image/jpeg,image/jpg,image/png"
                        name="file"
                        class="upload_input"
                        @change="ocrIdCardFrontOfFaren"
                      />
                    </div>
                  </el-form-item>
                  <el-form-item prop="frContactBPic" :error="frContactBPicError">
                    <div class="ID_back" v-if="step1Form.frContactBPic">
                      <img class="img" :src="baseURL + step1Form.frContactBPic" />
                      <div class="mask">
                        <i class="el-icon-search"  @click.stop="previewBigImg(step1Form.frContactBPic)"></i>
                        <i class="el-icon-delete" @click.stop="deleteFrContactBPic"></i>
                      </div>
                    </div>
                    <div class="ID_back" v-loading="frContactBPicLoading" v-else>
                      <input
                        type="file"
                        accept="image/jpeg,image/jpg,image/png"
                        name="file"
                        class="upload_input"
                        @change="ocrIdCardBackOfFaren"
                      />
                    </div>
                  </el-form-item>
                  <div class="desc_box">
                    <div class="desc_name">上传说明：</div>
                    <div class="desc_text">
                      <div>请上传清晰的证件照片</div>
                      <div>系统将自动识别证件信息</div>
                      <div>文件仅限jpeg/jpg/png格式，且大小不超过5M</div>
                    </div>
                  </div>
                </div>
                <div class="tips">
                  <i class="el-icon-warning icon"></i>
                  部分信息由图片自动识别，请仔细核对，如有出入请及时修正
                </div>
                <div class="company_base_msg_form">
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item label="法人姓名" prop="frContactName">
                        <el-input v-model="step1Form.frContactName"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="证件类型" prop="frContactType">
                        <el-select v-model="step1Form.frContactType" style="width: 100%;">
                          <el-option value="">请选择</el-option>
                          <el-option
                            v-for="item in idTypeList"
                            :key="item.dictValue"
                            :value="item.dictLabel"
                          >{{ item.dictLabel }}</el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item label="身份证号" prop="frContactId">
                        <el-input v-model="step1Form.frContactId"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="性别" prop="frContactSex">
                        <el-select v-model="step1Form.frContactSex" style="width: 100%">
                          <el-option value="">请选择</el-option>
                          <el-option
                            v-for="item in sexList"
                            :key="item.dictValue"
                            :value="item.dictLabel"
                          >{{ item.dictLabel }}</el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item label="民族" prop="frContactEthnic">
                        <el-input
                          v-model="step1Form.frContactEthnic"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="签发机关" prop="frContactIssuing">
                        <el-input
                          v-model="step1Form.frContactIssuing"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item label="出生日期" prop="frContactBirth">
                        <el-date-picker
                          v-model="step1Form.frContactBirth"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          style="width: 100%;"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item
                        label="证件起始日期"
                        prop="frContactCardStart"
                      >
                        <el-date-picker
                          v-model="step1Form.frContactCardStart"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          style="width: 100%"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item
                        label="证件到期日期"
                        :prop="step1Form.frContactCardEndLongEffect === false ? 'frContactCardEnd' : 'frContactCardEndLongEffect'"
                      >
                        <div class="limited_line">
                          <el-date-picker
                            v-model="step1Form.frContactCardEnd"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            style="width: 100%"
                            :disabled="step1Form.frContactCardEndLongEffect === true"
                          ></el-date-picker>
                          <el-checkbox
                            :disabled="step1Form.frContactCardEndLongEffect === false"
                            v-model="step1Form.frContactCardEndLongEffect"
                            class="limited_checkbox"
                          >长期有效</el-checkbox>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="户籍地址" prop="frContactAddress">
                        <el-input
                          v-model="step1Form.frContactAddress"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item label="手机号码" prop="frContactPhone">
                        <el-input v-model="step1Form.frContactPhone"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="法人邮箱" prop="frContactEmail">
                        <el-input v-model="step1Form.frContactEmail"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
            <div class="mod signature">
              <div class="title">
                <i class="icon"></i>
                电子签名授权书
              </div>
              <div class="content p_b_40">
                <div class="upload_box">
                  <el-form-item prop="signaturePic" :error="signaturePicError">
                    <div v-if="step1Form.signaturePic" class="pdf">
                      <img class="img" src="@/assets/authenticate/pdf.png" alt="" />
                      <div class="mask">
                        <a
                          :href="baseURL + step1Form.signaturePic"
                          target="_blank"
                          class="el-icon-search preview"
                        ></a>
                        <i
                          class="el-icon-delete delete"
                          @click.stop="step1Form.signaturePic = ''"
                        ></i>
                      </div>
                    </div>
                    <div class="sign_template" v-loading="signaturePicLoading" v-else>
                      <input
                        type="file"
                        accept=".pdf"
                        multiple
                        name="file"
                        class="upload_input"
                        @change="uploadStep1SignImg"
                      />
                    </div>
                  </el-form-item>
                  <div class="desc_box">
                    <div class="desc_name">上传说明：</div>
                    <div class="desc_text">
                      <div>
                        关于电子签名认证证书授权委托书，请下载模版后，根据文件要求加盖企业公章及法定代表人签章/签字，若多页，
                      </div>
                      <div>需加盖骑缝章，完成后上传扫描文件</div>
                      <div>文件仅限pdf格式，且大小不超过10M</div>
                    </div>
                    <div class="signature_template">
                      电子签名认证证书授权委托书
                      <div class="download_template">
                        <a
                          :href="baseURL + step1Download.fileUrl || ''"
                          target="_blank"
                          class="download_btn"
                        >
                          <i class="el-icon-document-copy icon"></i>下载模板
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="mod prev_and_next_step">
              <div class="agreement_box">
                <el-form-item prop="agreement">
                  <el-checkbox
                    v-model="step1Form.agreement"
                    class="agree_checkbox"
                  >
                    <span class="text">我已阅读并同意</span>
                    <a
                      class="agreement"
                      :href="baseURL + downloadTemplate3.fileUrl"
                      target="_blank"
                      @click.stop
                    >《互盛科技平台服务协议》、</a>
                    <a
                      class="agreement"
                      :href="baseURL + downloadTemplate5.fileUrl"
                      target="_blank"
                      @click.stop
                    >《平台用户隐私政策》</a
                    >
                  </el-checkbox>
                </el-form-item>
              </div>
              <div class="btns">
                <el-button class="btn_prev" :loading="saveLoading" @click="save">保存</el-button>
                <el-button class="btn_next" type="primary" :loading="submitLoading" @click="nextStep"
                  >下一步</el-button
                >
              </div>
            </div>
          </el-form>
        </div>
        <div class="step_content step_2_content" v-if="currentStep === 2">
          <el-form
            ref="step2Form"
            label-position="right"
            :model="step2Form"
            :rules="step2Rules"
          >
            <div class="mod company_legal_msg">
              <div class="title">
                <i class="icon"></i>
                企业管理员信息
              </div>
              <div class="content p_b_18">
                <el-form-item class="fr_is_admin">
                  <el-checkbox
                    v-model="step1Form.frIsAdmin"
                    @change="frIsAdminChange"
                  >管理人员同法人代表</el-checkbox>
                </el-form-item>
                <div class="upload_box">
                  <el-form-item prop="contactRPic" :error="contactRPicError">
                    <div class="ID_top" v-if="step2Form.contactRPic">
                      <img :src="baseURL + step2Form.contactRPic" alt="" class="img" />
                      <div class="mask">
                        <i
                          class="el-icon-search preview"
                          @click.stop="previewBigImg(step2Form.contactRPic)"
                        ></i>
                        <i
                          class="el-icon-delete delete"
                          @click.stop="deleteContactRPic"
                        ></i>
                      </div>
                    </div>
                    <div class="ID_top" v-loading="contactRPicLoading" v-else>
                      <input
                        type="file"
                        accept="image/jpeg,image/jpg,image/png"
                        name="file"
                        class="upload_input"
                        @change="ocrIdCardFrontOfManager"
                      />
                    </div>
                  </el-form-item>
                  <el-form-item prop="contactBPic" :error="contactBPicError">
                    <div class="ID_back" v-if="step2Form.contactBPic">
                      <img :src="baseURL + step2Form.contactBPic" alt="" class="img" />
                      <div class="mask">
                        <i
                          class="el-icon-search preview"
                          @click.stop="previewBigImg(step2Form.contactBPic)"
                        ></i>
                        <i
                          class="el-icon-delete delete"
                          @click.stop="deleteContactBPic"
                        ></i>
                      </div>
                    </div>
                    <div class="ID_back" v-loading="contactBPicLoading" v-else>
                      <input
                        type="file"
                        accept="image/jpeg,image/jpg,image/png"
                        name="file"
                        class="upload_input"
                        @change="ocrIdCardBackOfManager"
                      />
                    </div>
                  </el-form-item>
                  <div class="desc_box">
                    <div class="desc_name">上传说明：</div>
                    <div class="desc_text">
                      <div>请上传清晰的证件照片</div>
                      <div>系统将自动识别证件信息</div>
                      <div>文件仅限jpeg/jpg/png格式，且大小不超过5M</div>
                    </div>
                  </div>
                </div>
                <div class="tips">
                  <i class="el-icon-warning icon"></i>
                  部分信息由图片自动识别，请仔细核对，如有出入请及时修正
                </div>
                <div class="company_base_msg_form">
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item label="姓名" prop="contactName">
                        <el-input v-model="step2Form.contactName"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="证件类型" prop="contactType">
                        <el-select v-model="step2Form.contactType" style="width: 100%;">
                          <el-option value="">请选择</el-option>
                          <el-option
                            v-for="item in idTypeList"
                            :key="item.dictValue"
                            :value="item.dictLabel"
                          >{{ item.dictLabel }}</el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item label="身份证号" prop="contactId">
                        <el-input v-model="step2Form.contactId"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="性别" prop="contactSex">
                        <el-select v-model="step2Form.contactSex" style="width: 100%;">
                          <el-option value="">请选择</el-option>
                          <el-option
                            v-for="item in sexList"
                            :key="item.dictValue"
                            :value="item.dictLabel"
                          >{{ item.dictLabel }}</el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item label="民族" prop="contactEthnic">
                        <el-input v-model="step2Form.contactEthnic"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="签发机关" prop="contactIssuing">
                        <el-input v-model="step2Form.contactIssuing"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item label="出生日期" prop="contactBirth">
                        <el-input v-model="step2Form.contactBirth"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item
                        label="证件起始日期"
                        prop="contactCardStart"
                      >
                        <el-input
                          v-model="step2Form.contactCardStart"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item
                        label="证件到期日期"
                        :prop="step2Form.contactCardEndLongEffect === false ? 'contactCardEnd' : 'contactCardEndLongEffect'"
                      >
                        <div class="limited_line">
                          <el-date-picker
                            v-model="step2Form.contactCardEnd"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            style="width: 100%"
                            :disabled="step2Form.contactCardEndLongEffect === true"
                          ></el-date-picker>
                          <el-checkbox
                            :disabled="step2Form.contactCardEndLongEffect === false"
                            v-model="step2Form.contactCardEndLongEffect"
                            class="limited_checkbox"
                          >长期有效</el-checkbox>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="户籍地址" prop="contactAddress">
                        <el-input v-model="step2Form.contactAddress"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row type="flex">
                    <el-col :span="12">
                      <el-form-item label="手机号码" prop="contactPhone">
                        <el-input v-model="step2Form.contactPhone"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="邮箱" prop="contactEmail">
                        <el-input v-model="step2Form.contactEmail"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
            <div class="mod signature" v-if="!step1Form.frIsAdmin">
              <div class="title">
                <i class="icon"></i>
                法人授权委托书
              </div>
              <div class="content p_b_40">
                <div class="upload_box">
                  <el-form-item prop="adContactCorporate" :error="adContactCorporateError">
                    <div v-if="step2Form.adContactCorporate" class="pdf">
                      <img class="img" src="@/assets/authenticate/pdf.png" alt="" />
                      <div class="mask">
                        <a
                          :href="baseURL + step2Form.adContactCorporate"
                          target="_blank"
                          class="el-icon-search preview"
                        ></a>
                        <i
                          class="el-icon-delete delete"
                          @click.stop="step2Form.adContactCorporate = ''"
                        ></i>
                      </div>
                    </div>
                    <div class="sign_template" v-loading="adContactCorporateLoading" v-else>
                      <input
                        type="file"
                        accept=".pdf"
                        multiple
                        name="file"
                        class="upload_input"
                        @change="uploadStep2SignImg"
                      />
                    </div>
                  </el-form-item>
                  <div class="desc_box">
                    <div class="desc_name">上传说明：</div>
                    <div class="desc_text">
                      <div>
                        关于授权书，请下载模版后，根据文件要求加盖企业公章及法定代表人签章/签字，若多页，需加盖骑缝章，完成后
                      </div>
                      <div>
                        上传扫描文件，文件仅限jpeg/jpg/png/pdf格式，且大小不超过5M
                      </div>
                    </div>
                    <div class="signature_template">
                      法人授权委托书
                      <div class="download_template">
                        <a
                          :href="baseURL + step2Download.fileUrl || ''"
                          target="_blank"
                          class="download_btn"
                        >
                          <i class="el-icon-document-copy icon"></i>下载模板
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="mod prev_and_next_step">
              <div class="btns">
                <el-button class="btn_prev" @click="prevStep">上一步</el-button>
                <el-button class="btn_next" type="primary" :loading="submitLoading" @click="nextStep"
                  >下一步</el-button
                >
              </div>
            </div>
          </el-form>
        </div>
        <div class="step_content step_3_content" v-if="currentStep === 3">
          <div class="mod company_legal_msg">
            <div class="title">
              <i class="icon"></i>
              企业银行账户
            </div>
            <div class="content p_b_18" v-if="step3CurrentPart === 1">
              <el-form
                ref="step3Part1Form"
                :model="step3Part1Form"
                :rules="step3Part1Rules"
                label-position="right"
                class="company_base_msg_form"
              >
                <el-row type="flex">
                  <el-col :span="12">
                    <el-form-item label="开户名称" prop="accountName">
                      <el-input :disabled="true" v-model="step3Part1Form.accountName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="银行账号" prop="bankNumber">
                      <el-input v-model="step3Part1Form.bankNumber"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row type="flex">
                  <el-col :span="12">
                    <el-form-item label="开户银行" prop="bankDeposit">
                      <el-select v-model="step3Part1Form.bankDeposit" style="width: 100%">
                        <el-option value="">请选择</el-option>
                        <el-option
                          v-for="item in bankList"
                          :key="item.dictValue"
                          :label="item.dictLabel"
                          :value="item.dictValue"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="开户行所在地" prop="bankProvinces">
                      <div class="select_province_city">
                        <el-select v-model="step3Part1Form.bankProvinces" @change="selectProvincesChange">
                          <el-option value="">请选择</el-option>
                          <el-option
                            v-for="item in provinces"
                            :key="item.code"
                            :label="item.name"
                            :value="item.name"
                          >
                          </el-option>
                        </el-select>
                        <el-form-item prop="bankCities" label-width="0">
                          <el-select v-model="step3Part1Form.bankCities">
                            <el-option value="">请选择</el-option>
                            <el-option
                              v-for="item in cities"
                              :key="item.code"
                              :label="item.name"
                              :value="item.name"
                            >
                            </el-option>
                          </el-select>
                        </el-form-item>
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row type="flex">
                  <el-col :span="12">
                    <el-form-item label="开户支行" prop="bankBranch">
                      <el-input v-model="step3Part1Form.bankBranch"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="大额行号（联行号）" prop="bankCode">
                      <el-input v-model="step3Part1Form.bankCode"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div
              class="no_style_content clearfixed"
              v-if="step3CurrentPart === 2"
            >
              <el-form
                ref="step3Part2Form"
                :model="step3Part2Form"
                :rules="step3Part2Rules"
                label-position="right"
                class="company_base_msg_form"
              >
                <el-row type="flex">
                  <el-col :span="18" :offset="6">
                    <el-form-item label="收小款银行">
                      <el-input
                        :disabled="true"
                        class="w_400"
                        v-model="bankNameAndAccountName"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row type="flex">
                  <el-col :span="18" :offset="6">
                    <el-form-item label="打款金额" prop="paymentAmount">
                      <el-input class="w_400" v-model="step3Part2Form.paymentAmount"></el-input>
                      <el-button
                        class="small_btn"
                        type="primary"
                        @click="getSmallDeposit"
                      >
                        获取小金额
                      </el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div class="big_tips">
                <i class="el-icon-warning icon"></i>
                <div>
                  <!-- test -->
                  <div class="text">
                    小金额将转入
                    <span class="theme_color">企业（{{bankNameAndAccountName}}）银行账户</span
                    >，请在收支明细中查询，将小额正确输入才可以通过认证。
                  </div>
                  <div class="text">每天最多下发 5 次，今天已下发 {{ timeInt }} 次</div>
                </div>
              </div>
            </div>
          </div>
          <div class="mod prev_and_next_step">
            <div class="btns">
              <template v-if="step3CurrentPart === 1">
                <el-button class="btn_prev" @click="prevStep">上一步</el-button>
                <el-button class="btn_next" type="primary" :loading="submitLoading" @click="step3NextStep">
                  下一步
                </el-button>
              </template>
              <template v-else-if="step3CurrentPart === 2">
                <el-button class="btn_prev" @click="step3CurrentPart = 1">
                  上一步
                </el-button>
                <el-button
                  class="btn_next"
                  type="primary"
                  :disabled="submitDisabled"
                  :loading="submitLoading"
                  @click="nextStep"
                >提交</el-button>
              </template>
            </div>
          </div>
        </div>
        <div class="step_content step_4_content" v-if="currentStep === 4">
          <div class="mod prev_and_next_step">
            <div class="wait_content">
              <img class="wait_img" src="@/assets/authenticate/wait.png" alt="">
              <div class="wait_title">等待审核</div>
              <div class="wait_desc">预计审核时间10-30分钟完成</div>
              <div class="btns">
                <el-button class="btn" type="primary" @click="gotoCompanyMsgPage">确定</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <CustomDialog
      title="查看内容"
      width="70%"
      :visible="dialogVisible"
      @close="dialogVisible = false"
    >
      <div class="mask_dialog_content">
        <div class="img_box">
          <img :src="baseURL + previewBigImgUrl" alt="" class="img" />
        </div>
      </div>
    </CustomDialog>
  </div>
</template>

<script>
import colors from "@/assets/styles/variables.scss";
import { getCompanyMsg } from '@/api/production'
import { downloadTemplate, getCityData, getTimeInt, getSmallDeposit, addCompany, enterpriseCheck } from "@/api/authenticate";
import { uploadImg } from "@/utils/request";
import CustomDialog from '@/customComponents/dialog'

export default {
  components: {
    CustomDialog,
  },
  data() {
    const validateDate = (message) => {
      return (rule, value, callback) => {
        if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
          callback();
        } else {
          callback(message);
        }
      };
    };
    const validateMobilePhone = (message) => {
      return (rule, value, callback) => {
        if (/^1\d{10}$/.test(value)) {
          callback();
        } else {
          callback(message);
        }
      };
    };
    const validateIDNum = (message) => {
      return (rule, value, callback) => {
        if (/(^\d{15}$)|(^\d{17}(\d|X)$)/.test(value)) {
          callback();
        } else {
          callback(message);
        }
      };
    };
    const validateEmail = (message) => {
      return (rule, value, callback) => {
        if (/^([a-zA-Z0-9_.+-]+)@[a-zA-Z0-9.-]+\.([a-zA-Z]{2,})$/.test(value)) {
          callback();
        } else {
          callback(message);
        }
      };
    };
    return {
      pageLoading: false,
      saveLoading: false,
      submitLoading: false,
      baseURL: process.env.NODE_ENV === 'development' ? process.env.VUE_APP_BASE_API :
        process.env.VUE_APP_HTTP_REQUEST_ADDRESS,
      themeColor: colors.themeColor,
      currentStep: 1,
      step3CurrentPart: 1,
      companyTypeList: [
        // 10:公司 20:金融机构 30:增信机构',
        {
          name: "公司/企业",
          value: '10',
          tip: "核心企业、供应商企业、经销商企业公司类型等",
        },
        {
          name: "金融机构",
          value: '20',
          tip: "银行机构、保理公司、小贷公司、信托公司等",
        },
        {
          name: "增信机构",
          value: '30',
          tip: "担保公司、融担公司等",
        },
      ],
      comLicenceObj: {}, // 营业执照ocr解析数据
      idCardFrontObjOfFaRen: {}, // 法人身份证正面ocr解析数据
      idCardBackObjOfFaRen: {}, // 法人身份证反面ocr解析解数
      businessPicError: '', // 营业执照,图片校验错误提示语
      frContactRPicError: "", // 法人-身份证人像面,图片校验错误提示语
      frContactBPicError: "", // 法人-身份证国徽面,图片校验错误提示语
      signaturePicError: '', // 电子签名授权书，校验错误提示语
      companyPropertyList: [], // 公司性质列表
      industryList: [], // 行业分类列表
      idTypeList: [], // 证件类型列表
      sexList: [], // 性别列表
      businessPicLoading: false,
      frContactRPicLoading: false,
      frContactBPicLoading: false,
      contactRPicLoading: false,
      contactBPicLoading: false,
      signaturePicLoading: false,
      adContactCorporateLoading: false,
      step1Form: {
        enterpriseType: "", // 企业类型 10:公司 20:金融机构 30:增信机构,

        businessPic: "", // 营业执照图片,
        enterpriseName: "", // '企业名称',
        creditCode: "", // '统一社会信用代码',
        legal: "", // '法定代表人',
        registered: "", // '注册资本',
        address: "", // '注册地址',
        establishedDate: "", // '成立日期',
        limited: "", // '有限期限',
        limitedLongEffect: false, // 长期有效
        enType: "", // '公司类型',
        property: "", // '公司性质',
        industry: "", // '行业分类',
        companyPhone: "", // '公司电话',
        officeAddress: "", // '办公地址',
        bfanwei: '', // 企业经营范围

        frContactRPic: "", // '法人-身份证人像面',
        frContactBPic: "", // '法人-身份证国徽面',
        frContactName: "", // '法人-联系人姓名',
        frContactType: "", // '法人-证件类型',
        frContactId: "", // '法人-身份证号',
        frContactSex: "", // '法人-性别',
        frContactEthnic: "", // '法人-民族',
        frContactIssuing: "", // '法人-签发机关',
        frContactBirth: "", // '法人-出生日期',
        frContactCardStart: "", // '法人-证件起始日期',
        frContactCardEnd: "", // '法人-证件到期日期',
        frContactCardEndLongEffect: false, // 长期有效
        frContactAddress: "", // '法人-户籍地址',
        frContactPhone: "", // '法人-手机号码',
        frContactEmail: "", // '法人-邮箱',

        signaturePic: "", // '电子签名授权书',

        agreement: false,

        frIsAdmin: "", // '管理人员同法人代表 1:是 2:否',
      },
      step1Rules: {
        enterpriseType: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请选择企业类型",
          },
        ],

        businessPic: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请上传营业执照",
          },
          {
            validator: (rule, value, callback) => {
              console.log(value)
              if (value) {
                callback()
              } else {
                callback()
              }
            },
            trigger: ['change', 'blur']
          },
        ], // 营业执照图片,
        enterpriseName: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入企业名称",
          },
        ], // '企业名称',
        creditCode: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入统一社会信用代码",
          },
        ], // '统一社会信用代码',
        legal: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入法定代表人",
          },
        ], // '法定代表人',
        registered: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入注册资本",
          },
        ], // '注册资本',
        address: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入注册地址",
          },
        ], // '注册地址',
        establishedDate: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入成立日期",
          },
          {
            validator: validateDate("请输入正确的成立日期"),
            trigger: ["change", "blur"],
          },
        ], // '成立日期',
        limited: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入有限期限",
          },
          {
            validator: validateDate("请输入正确的有限期限"),
            trigger: ["change", "blur"],
          },
        ], // '有限期限',
        limitedLongEffect: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入有限期限",
          },
        ], // 长期有效
        enType: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入公司类型",
          },
        ], // '公司类型',
        property: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入公司性质",
          },
        ], // '公司性质',
        industry: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入行业分类",
          },
        ], // '行业分类',
        companyPhone: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入公司电话",
          },
        ], // '公司电话',
        officeAddress: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入办公地址型",
          },
        ], // '办公地址',
        frContactRPic: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请上传法人身份证人像面",
          },
        ], // '法人-身份证人像面',
        bfanwei: [{ required: true, trigger: ["change", "blur"], message: "请输入企业经营范围"}], // 企业经营范围
        frContactBPic: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请上传法人身份证国徽面",
          },
        ], // '法人-身份证国徽面',
        frContactName: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入法人联系人姓名",
          },
        ], // '法人-联系人姓名',
        frContactType: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入法人证件类型",
          },
        ], // '法人-证件类型',
        frContactId: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入法人身份证号",
          },
          {
            validator: validateIDNum("请输入正确的法人身份证号"),
            trigger: ["change", "blur"],
          },
        ], // '法人-身份证号',
        frContactSex: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入法人性别",
          },
        ], // '法人-性别',
        frContactEthnic: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入法人民族",
          },
        ], // '法人-民族',
        frContactIssuing: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入法人签发机关",
          },
        ], // '法人-签发机关',
        frContactBirth: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入法人出生日期",
          },
          {
            validator: validateDate("请输入正确的法人出生日期"),
            trigger: ["change", "blur"],
          },
        ], // '法人-出生日期',
        frContactCardStart: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入法人证件起始日期",
          },
          {
            validator: validateDate("请输入正确的法人证件起始日期"),
            trigger: ["change", "blur"],
          },
        ], // '法人-证件起始日期',
        frContactCardEnd: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入法人证件到期日期",
          },
          {
            validator: validateDate("请输入正确的法人证件到期日期"),
            trigger: ["change", "blur"],
          },
        ], // '法人-证件起始日期',
        frContactCardEndLongEffect: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入法人证件到期日期",
          },
        ], // 长期有效
        frContactAddress: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入法人户籍地址",
          },
        ], // '法人-户籍地址',
        frContactPhone: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入法人手机号码",
          },
          {
            validator: validateMobilePhone("请输入正确的法人手机号码"),
            trigger: ["change", "blur"],
          },
        ], // '法人-手机号码',
        frContactEmail: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入法人邮箱",
          },
          {
            validator: validateEmail("请输入正确法人邮箱"),
            trigger: ["change", "blur"],
          },
        ], // '法人-邮箱',

        signaturePic: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请上传电子签名授权书",
          },
        ], // '电子签名授权书',
        agreement: [
          {
            validator: (rule, value, callback) => {
              if (value) {
                callback();
              } else {
                callback("请勾选协议");
              }
            },
            trigger: ["change", "blur"],
            message: "请勾选协议",
          },
        ], // 协议
      },
      contactRPicError: "", // 管理员-身份证人像面,图片校验错误提示语
      contactBPicError: "", // 管理员-身份证国徽面,图片校验错误提示语
      adContactCorporateError: "", // '法人授权委托书',校验错误提示语
      step2Form: {
        contactRPic: "", // '管理员-身份证人像面',
        contactBPic: "", // '管理员-身份证国徽面',
        contactName: "", // '管理员-联系人姓名',
        contactType: "", // '管理员-证件类型',
        contactId: "", // '管理员-身份证号',
        contactSex: "", // '管理员-性别',
        contactEthnic: "", // '管理员-民族',
        contactIssuing: "", // '管理员-签发机关',
        contactBirth: "", // '管理员-出生日期',
        contactCardStart: "", //'管理员-证件起始日期',
        contactCardEnd: "", // '管理员-证件起始日期',
        contactCardEndLongEffect: '', // 长期有效
        contactAddress: "", // '管理员-户籍地址',
        contactPhone: "", // '管理员-手机号码',
        contactEmail: "", // '管理员-邮箱',

        adContactCorporate: "", // '法人授权委托书',
      },
      step2Rules: {
        contactRPic: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请上传管理员身份证人像面",
          },
        ], // '管理员-身份证人像面',
        contactBPic: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请上传管理员身份证国徽面",
          },
        ], // '管理员-身份证国徽面',
        contactName: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入管理员联系人姓名",
          },
        ], // '管理员-联系人姓名',
        contactType: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入管理员证件类型",
          },
        ], // '管理员-证件类型',
        contactId: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入管理员身份证号",
          },
          {
            validator: validateIDNum("请输入正确的管理员身份证号"),
            trigger: ["change", "blur"],
          },
        ], // '管理员-身份证号',
        contactSex: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入管理员性别",
          },
        ], // '管理员-性别',
        contactEthnic: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入管理员民族",
          },
        ], // '管理员-民族',
        contactIssuing: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入管理员签发机关",
          },
        ], // '管理员-签发机关',
        contactBirth: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入管理员出生日期",
          },
          {
            validator: validateDate("请输入正确的管理员出生日期"),
            trigger: ["change", "blur"],
            message: "请输入管理员出生日期",
          },
        ], // '管理员-出生日期',
        contactCardStart: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入管理员证件起始日期",
          },
          {
            validator: validateDate("请输入正确的管理员证件起始日期"),
            trigger: ["change", "blur"],
            message: "请输入管理员证件起始日期",
          },
        ], //'管理员-证件起始日期',
        contactCardEnd: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入管理员证件到期日期",
          },
          {
            validator: validateDate("请输入正确的管理员证件到期日期"),
            trigger: ["change", "blur"],
            message: "请输入管理员证件到期日期",
          },
        ], // '管理员-证件到期日期',
        contactCardEndLongEffect: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入管理员证件到期日期",
          },
        ],
        contactAddress: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入管理员户籍地址",
          },
        ], // '管理员-户籍地址',
        contactPhone: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入管理员手机号码",
          },
          {
            validator: validateMobilePhone("请输入正确的管理员手机号码"),
            trigger: ["change", "blur"],
            message: "请输入管理员手机号码",
          },
        ], // '管理员-手机号码',
        contactEmail: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请输入管理员邮箱",
          },
          {
            validator: validateEmail("请输入正确的管理员邮箱"),
            trigger: ["change", "blur"],
          },
        ], // '管理员-邮箱',
        adContactCorporate: [
          {
            required: true,
            trigger: ["change", "blur"],
            message: "请上传法人授权妥托书",
          },
        ], // 法人授权委托书
      },
      bankList: [], //银行列表
      provinces: [], // 省
      cities: [], // 市
      step3Part1Form: {
        accountName: '', // 开户名称
        bankNumber: '', // 银行账号
        bankDeposit: '', // 开户银行
        bankProvinces: '', // 开户行所在地——省
        bankCities: '', // 开户行所在地——市
        bankBranch: '', // 开户支行
        bankCode: '', // 大额行号
      },
      step3Part1Rules: {
        accountName: [
          { required: true, trigger: ['change', 'blur'], message: '请输入开户名称' },
        ], // 开户名称
        bankNumber: [{ required: true, trigger: ['change', 'blur'], message: '请输入银行账号' }], // 银行账号
        bankDeposit: [{ required: true, trigger: ['change'], message: '请选择开户银行' }], // 开户银行
        bankProvinces: [{ required: true, trigger: ['change'], message: '请选择省' }], // 开户行所在地——省
        bankCities: [{ required: true, trigger: ['change'], message: '请选择市' }], // 开户行所在地——市
        bankBranch: [{ required: true, trigger: ['change', 'blur'], message: '请输入开户支行' }], // 开户支行
        bankCode: [{ required: true, trigger: ['change', 'blur'], message: '请输入大额行号' }], // 大额行号
      },
      bankNameAndAccountName: '', //合成的银行和带*号的银行账号
      step3Part2Form: {
        paymentAmount: '', // 打款金额
      },
      step3Part2Rules: {
        paymentAmount: [{ required: true, trigger: ['change', 'blur'], message: '请输入打款金额' }], // 打款金额
      },
      timeInt: 0, // 小金额下发次数
      step1Download: {
        fileUrl: '',
        agreementName: '',
        fileType: ''
      }, // 电子签名认证证书授权委托书
      step2Download: {
        fileUrl: '',
        agreementName: '',
        fileType: ''
      }, // 法人授权妥托书
      downloadTemplate3: {
        fileUrl: '',
        agreementName: '',
        fileType: ''
      }, // 互盛科技平台服务注册协议
      downloadTemplate5: {
        fileUrl: '',
        agreementName: '',
        fileType: ''
      }, // 平台用户隐私协议
      previewBigImgUrl: "",
      dialogVisible: false,
      companyMsgObj: null, // 企业信息
      enterpriseId: '', // 企业Id
      status: 0, // 状态 0：未认证 1：等待审核 2：已认证 3：认证失败
      submitDisabled: true,
    };
  },
  watch: {
    'step1Form.enterpriseName': {
      handler: function(newVal, oldVal) {
        this.step3Part1Form.accountName = newVal
      },
      deep: true,
    }
  },
  mounted() {
    this.downloadTemplate(2).then((res) => {
      this.step1Download = res.data;
    }); // 电子签名认证证书授权委托书
    this.downloadTemplate(1).then((res) => {
      this.step2Download = res.data;
    }); // 法人授权委托书
    this.downloadTemplate(3).then((res) => {
      this.downloadTemplate3 = res.data;
    }); // 互盛科技平台服务注册协议
    this.downloadTemplate(5).then((res) => {
      this.downloadTemplate5 = res.data;
    }); // 平台用户隐私协议
    Promise.all([
      this.getCompanyPropertyList(),
      this.getIndustryList(),
      this.getIdTypeList(),
      this.getSexList(),
      this.getCityData(),
      this.getBankList()
    ]).then(() => {
      if (this.$route.query.enterpriseId) {
        this.enterpriseId = this.$route.query.enterpriseId
      }
      this.pageLoading = true
      getCompanyMsg().then((res) => {
        this.pageLoading = false
        this.companyMsgObj = res.data
        const { adminOpertion, enterpriseBank, status, ...rest } = res.data
        Object.keys(this.step1Form).forEach((key) => {
          if (key === 'frIsAdmin') {
            this.step1Form[key] = Number(res.data[key]) === 1 ? true : false
          } else {
            this.step1Form[key] = res.data[key]
          }
        })
        if (this.step1Form.limited === '1') {
          this.step1Form.limitedLongEffect = true
          this.step1Form.limited = ''
        } else {
          this.step1Form.limitedLongEffect = false
        }
        if (this.step1Form.frContactCardEnd === '1') {
          this.step1Form.frContactCardEndLongEffect = true
          this.step1Form.frContactCardEnd = ''
        } else {
          this.step1Form.frContactCardEndLongEffect = false
        }
        Object.keys(this.step2Form).forEach((key) => {
          this.step2Form[key] = res.data.adminOperation[key]
        })
        this.step2Form.adContactCorporate = res.data.adContactCorporate
        if (this.step2Form.contactCardEnd === '1') {
          this.step2Form.contactCardEndLongEffect = true
          this.step2Form.contactCardEnd = ''
        } else {
          this.step2Form.contactCardEndLongEffect = false
        }
        Object.keys(this.step3Part1Form).forEach((key) => {
          this.step3Part1Form[key] = res.data.enterpriseBank[key]
        })
        this.step3Part1Form.paymentAmount = res.data.enterpriseBank.paymentAmount
        this.status = res.data.status
        console.log(this.step1Form.signaturePic)
        this.selectProvincesChange(res.data.enterpriseBank.bankProvinces)
      }).catch(() => {
        this.pageLoading = false
      })
    })
  },
  methods: {
    // 图片上传校验
    imgValidate(fileType, fileSize, name, types = 'image/jpeg,image/jpg,image/png') {
      if (types.indexOf(fileType.split('/')[1]) === -1) {
        this[name] = '上传格式不正确'
        return false
      }
      if (fileSize/1000/1024 > 10) {
        this[name] = '大小不超过10M'
        return false
      }
      return true
    },
    // 公司性质列表
    getCompanyPropertyList() {
      return new Promise((resolve, reject) => {
        this.getDicts('company_property_list').then((res) => {
          this.companyPropertyList = res.data
          resolve()
        })
      }).catch(() => {
        reject()
      })
    },
    // 行业分类列表
    getIndustryList() {
      return new Promise((resolve, reject) => {
        this.getDicts('industry_list').then((res) => {
          this.industryList = res.data
          resolve()
        }).catch(() => {
          reject()
        })
      })
    },
    // 证件类型列表
    getIdTypeList() {
      return new Promise((resolve, reject) => {
        this.getDicts('id_type_list').then((res) => {
          this.idTypeList = res.data
          resolve()
        }).catch(() => {
          reject()
        })
      })
    },
    // 性别列表
    getSexList() {
      return new Promise((resolve, reject) => {
        this.getDicts('sex_list').then((res) => {
          this.sexList = res.data
          resolve()
        }).catch(() => {
          reject()
        })
      })
    },
    // 营业执照ocr
    ocrComLicence(e) {
      const file = e.target.files[0]
      e.target.value = ''
      if (!this.imgValidate(file.type, file.size, 'businessPicError')) {
        return
      }
      this.businessPicLoading = true
      uploadImg("/ocrComLicence", { file }, { timeout: 60000 }).then((res) => {
        this.businessPicLoading = false
        if (res.code === 200) {
          // enterprise
          this.comLicenceObj = res.data.enterprise
          this.step1Form.address = res.data.enterprise.address;
          this.step1Form.bfanwei = res.data.enterprise.bfanwei; // 经营范围--"水处理设备、环保产品及零部件,空气调节设备及其零部件家用电器、燃气器具、电热水器具、太阳能设备、医疗器械的研究、批发、进出口、佣金代理(拍卖除外)并提供相关配套服务。【依法须经批准的项目,经相关部门批准后方可开展经营活动】"
          this.step1Form.creditCode = res.data.enterprise.creditCode; // "91310000MA1FPFRF44"
          this.step1Form.enType = res.data.enterprise.enType;
          this.step1Form.enterpriseName = res.data.enterprise.enterpriseName;
          this.step1Form.establishedDate = res.data.enterprise.establishedDate; // "2019-08-28"
          this.step1Form.legal = res.data.enterprise.legal; // "朱芮"
          if (res.data.enterprise.limited === '1') {
            this.step1Form.limitedLongEffect = true
            this.step1Form.limited = ''
          } else {
            this.step1Form.limited = res.data.enterprise.limited; // "2049-08-27"
          }
          this.step1Form.registered = res.data.enterprise.registered; // "150万美元"
          this.step1Form.businessPic = res.data.url;
          this.businessPicError = ' '
          enterpriseCheck({
            enterpriseName: this.step1Form.enterpriseName,
            creditCode: this.step1Form.creditCode,
          }) // 查看企业是否注册
        }
      }).catch(() => {
        this.businessPicLoading = false
      });
    },
    // 删除营业执照
    deleteBusinessPic() {
      this.comLicenceObj = {};
      [
        'address', 'bfanwei', 'creditCode',
        'enType', 'enterpriseName', 'establishedDate',
        'legal', 'limited', 'limitedLongEffect', 'registered', 'businessPic'
      ].forEach((key) =>  {
        if (key === 'limitedLongEffect') {
          this.step1Form[key] = false
        } else {
          this.step1Form[key] = ''
        }
      })
    },
    // 法人 身份证orc 正面
    ocrIdCardFrontOfFaren(e) {
      const file = e.target.files[0]
      e.target.value = ''
      if (!this.imgValidate(file.type, file.size, 'frContactRPicError')) {
        return
      }
      this.frContactRPicLoading = true
      uploadImg("/ocrIdCard", { type: "front", file }, { timeout: 60000 }).then(
        (res) => {
          this.frContactRPicLoading = false
          if (res.code === 200) {
            this.idCardFrontObjOfFaRen = res.data.idcard
            this.step1Form.frContactAddress = res.data.idcard.address;
            this.step1Form.frContactBirth = res.data.idcard.birth;
            this.step1Form.frContactId = res.data.idcard.cardId;
            this.step1Form.frContactName = res.data.idcard.name;
            this.step1Form.frContactEthnic = res.data.idcard.nation;
            this.step1Form.frContactSex =
              res.data.idcard.sex === "1" ? "男" : "女"; // 1: 男 2: 女
            this.step1Form.frContactRPic = res.data.url;
            this.frContactRPicError = ' '
          }
        }
      ).catch(() => {
        this.frContactRPicLoading = false
      });
    },
    // 法人 身份证——正面 图片删除
    deleteFrContactRPic() {
      this.idCardFrontObjOfFaRen = {};
      [
        'frContactAddress', 'frContactBirth', 'frContactId',
        'frContactName', 'frContactEthnic', 'frContactSex',
        'frContactRPic'
      ].forEach(key =>  {
        this.step1Form[key] = ''
      })
    },
    // 法人 身份证orc 反面
    ocrIdCardBackOfFaren(e) {
      const file = e.target.files[0]
      e.target.value = ''
      if (!this.imgValidate(file.type, file.size, 'frContactBPicError')) {
        return
      }
      this.frContactBPicLoading = true
      uploadImg("/ocrIdCard", { type: "back", file }, { timeout: 60000 }).then(
        (res) => {
          this.frContactBPicLoading = false
          if (res.code === 200) {
            this.idCardBackObjOfFaRen = res.data.idcard
            if (res.data.idcard.idcardPeriodEnd === '1') {
              this.step1Form.frContactCardEndLongEffect = true
              this.step1Form.frContactCardEnd = ''
            } else {
              this.step1Form.frContactCardEnd =
              res.data.idcard.idcardPeriodEnd;
            }
            this.step1Form.frContactCardStart =
              res.data.idcard.idcardPeriodStart;
            this.step1Form.frContactIssuing = res.data.idcard.issuing;
            this.step1Form.frContactBPic = res.data.url;
            this.frContactBPicError = ' '
          }
        }
      ).catch(() => {
        this.frContactBPicLoading = false
      });
    },
    // 法人 身份证——反面 图片删除
    deleteFrContactBPic() {
      this.idCardBackObjOfFaRen = {};
      [
        'frContactCardEnd', 'frContactCardStart', 'frContactIssuing',
        'frContactBPic', 'frContactCardEndLongEffect',
      ].forEach(key =>  {
        if (key === 'frContactCardEndLongEffect') {
          this.step1Form[key] = false
        } else {
          this.step1Form[key] = ''
        }
      })
    },
    frIsAdminChange(value) {
      console.log(value)
      if (value) {
        Object.keys(this.step2Form).forEach((key) => {
          console.log(key)
          console.log('fr' + key.slice(0,1).toUpperCase() + key.slice(1,),this.step1Form['fr' + key.slice(0,1).toUpperCase() + key.slice(1,)])
          this.step2Form[key] = this.step1Form['fr' + key.slice(0,1).toUpperCase() + key.slice(1,)]
        })
      } else {
        Object.keys(this.step2Form).forEach((key) => {
          this.step2Form[key] = ''
        })
      }
    },
    // 管理人员 身份证ocr 正面
    ocrIdCardFrontOfManager(e) {
      const file = e.target.files[0]
      e.target.value = ''
      if (!this.imgValidate(file.type, file.size, 'contactRPicError')) {
        return
      }
      this.contactRPicLoading = true
      uploadImg("/ocrIdCard", { type: "front", file }, { timeout: 60000 }).then(
        (res) => {
          this.contactRPicLoading = false
          if (res.code === 200) {
            this.step2Form.contactAddress = res.data.idcard.address;
            this.step2Form.contactBirth = res.data.idcard.birth;
            this.step2Form.contactId = res.data.idcard.cardId;
            this.step2Form.contactName = res.data.idcard.name;
            this.step2Form.contactEthnic = res.data.idcard.nation;
            this.step2Form.contactSex =
              res.data.idcard.sex === '1' ? "男" : "女"; // 1: 男 2: 女
            this.step2Form.contactRPic = res.data.url;
            this.contactRPicError = ' '
          }
        }
      ).catch(() => {
        this.contactRPicLoading = false
      });
    },
    // 删除 管理员身份证——正面
    deleteContactRPic() {
      ['contactAddress', 'contactBirth',
      'contactId', 'contactName', 'contactEthnic',
       'contactSex', 'contactRPic'].forEach((key) => (this.step2Form[key] = ''))
    },
    // 管理人员 身份证ocr 反面
    ocrIdCardBackOfManager(e) {
      const file = e.target.files[0]
      e.target.value = ''
      if (!this.imgValidate(file.type, file.size, 'contactBPicError')) {
        return
      }
      this.contactBPicLoading = true
      uploadImg("/ocrIdCard", { type: "back", file }, { timeout: 60000 }).then(
        (res) => {
          this.contactBPicLoading = false
          if (res.code === 200) {
            if (res.data.idcard.idcardPeriodEnd === '1') {
              this.step2Form.contactCardEndLongEffect = true
              this.step2Form.contactCardEnd = ''
            } else {
              this.step2Form.contactCardEnd = res.data.idcard.idcardPeriodEnd;
            }
            this.step2Form.contactCardStart =
              res.data.idcard.idcardPeriodStart;
            this.step2Form.contactIssuing = res.data.idcard.issuing;
            this.step2Form.contactBPic = res.data.url;
            this.contactBPicError = ' '
          }
        }
      ).catch(() => {
        this.contactBPicLoading = false
      });
    },
    // 删除 管理员身份证——反面
    deleteContactBPic() {
      ['contactCardEnd', 'contactCardStart',
      'contactIssuing', 'contactBPic', 'contactCardEndLongEffect'].forEach((key) => {
        if (key === 'contactCardEndLongEffect') {
          this.step1Form[key] = false
        } else {
          this.step1Form[key] = ''
        }
      })
    },
    // 下载模板
    downloadTemplate(id) {
      return new Promise((resolve, reject) => {
        downloadTemplate(id).then((res) => {
          resolve(res);
        });
      });
    },
    // 上传电子签名认证证书授权委托书
    uploadStep1SignImg(e) {
      const file = e.target.files[0]
      e.target.value = ''
      console.log(file.type)
      if (!this.imgValidate(file.type, file.size, 'signaturePicError', 'application/pdf')) {
        return
      }
      this.signaturePicLoading = true
      uploadImg("/common/upload", { file }).then((res) => {
        this.signaturePicLoading = false
        if (res.code === 200) {
          this.step1Form.signaturePic = res.fileName;
          this.signaturePicError = ' '
        }
      }).catch(() => {
        this.signaturePicLoading = false
      });
    },
    // 上传法人授权妥托书
    uploadStep2SignImg(e) {
      const file = e.target.files[0]
      e.target.value = ''
      if (!this.imgValidate(file.type, file.size, 'signaturePicError', 'application/pdf')) {
        return
      }
      this.adContactCorporateLoading = true
      uploadImg("/common/upload", { file }).then((res) => {
        this.adContactCorporateLoading = false
        if (res.code === 200) {
          this.step2Form.adContactCorporate = res.fileName;
          this.adContactCorporateError = ' '
        }
      }).catch(() => {
        this.adContactCorporateLoading = false
      });
    },
    // 预览上传的大图
    previewBigImg(imgUrl) {
      this.previewBigImgUrl = imgUrl;
      this.dialogVisible = true;
    },
    // 获取银行List
    getBankList() {
      return new Promise((resolve, reject) => {
        this.getDicts('peacevisa').then((res) => {
          if (res.code === 200) {
            this.bankList = res.data
            resolve()
          } else {
            reject()
          }
        })
      })
    },
    // 获取省市数据
    getCityData() {
      return new Promise((resolve, reject) => {
        getCityData().then((res) => {
          if (res.code === 200) {
            this.provinces = res.data
            resolve()
          } else {
            reject()
          }
        })
      })
    },
    // 选定省change
    selectProvincesChange(value) {
      this.step3Part1Form.provinces = value
      this.cities = this.provinces?.find?.((item) => {
        if (item.name === value) {
          return item
        }
      })?.children || []
      console.log(this.cities)
    },
    // // 选定市change
    // selectCitiesChange(value) {
    //   this.step3Part1Form.cities = value
    // },
    // 获取小金额
    getSmallDeposit() {
      getSmallDeposit(this.companyMsgObj.enterpriseBank.id).then((res) => {
        this.submitDisabled = false
        this.timeInt = 5 - res.timeInt
        this.$message({
          type: 'success',
          message: '小金额已发送'
        })
      })
    },
    prevStep() {
      --this.currentStep;
    },
    nextStep() {
      switch (this.currentStep) {
        case 1:
          this.$refs.step1Form.validate((valid) => {
            if (valid) {
              if (/*this.comLicenceObj.legal === this.idCardFrontObjOfFaRen.name && */this.step1Form.legal === this.step1Form.frContactName) {
                this.submitLoading = true
                this.submit().then(() => {
                  this.submitLoading = false
                  this.currentStep = 2;
                }).catch(() => {
                  this.submitLoading = false
                })
              } else {
                this.$message({
                  type: 'error',
                  message: '营业执照法人与法人身份证姓名不一至',
                  duration: 3000
                })
              }
            } else {
              this.$message({
                type: 'error',
                message: '有信息未填',
                duration: 3000
              })
            }
          });
          break;
        case 2:
          console.log(this.step2Form);
          this.$refs.step2Form.validate((valid) => {
            console.log(valid);
            if (valid) {
              if (this.step1Form.frIsAdmin) {
                if (/* this.comLicenceObj.legal === this.step2Form.contactName && */this.step1Form.legal === this.step2Form.contactName) {
                  this.submitLoading = true
                  this.submit().then(() => {
                    this.submitLoading = false
                    this.currentStep = 3;
                  }).catch(() => {
                    this.submitLoading = false
                  })
                } else {
                  this.$message({
                    type: 'error',
                    message: '营业执照法人与法人身份证姓名不一至',
                    duration: 3000
                  })
                }
              } else {
                this.submitLoading = true
                this.submit().then(() => {
                  this.submitLoading = false
                  this.currentStep = 3;
                }).catch(() => {
                  this.submitLoading = false
                })
              }
            } else {
              this.$message({
                type: 'error',
                message: '有信息未填',
                duration: 3000
              })
            }
          });
          break;
        case 3:
          this.$refs.step3Part2Form.validate((valid) => {
            if (valid) {
              this.submitLoading = true
              this.submit().then(() => {
                this.submitLoading = false
                this.currentStep = 4;
              }).catch(() => {
                this.submitLoading = false
              })
            } else {
              this.$message({
                type: 'error',
                message: '有信息未填',
                duration: 3000
              })
            }
          })
          break;
        case 4:
          break;
      }
    },
    step3NextStep() {
      if (this.step3CurrentPart === 1) {
        this.$refs.step3Part1Form.validate((valid) => {
          if (valid) {
            this.submitLoading = true
            this.submit().then(() => {
              this.submitLoading = false
              this.step3CurrentPart = 2
              // 获取小金额剩余次数
              getTimeInt(this.companyMsgObj.enterpriseBank.id).then((res) => {
                this.timeInt = 5 - res.data
              })
              const bankItem = this.bankList.find((item) => (item.dictValue === this.step3Part1Form.bankDeposit))
              if (bankItem) {
                this.bankNameAndAccountName = ''
                this.bankNameAndAccountName += bankItem.dictLabel + ' '
                this.bankNameAndAccountName += this.step3Part1Form.bankNumber.slice(0,3) +
                                              '*'.repeat(this.step3Part1Form.bankNumber.length-7) +
                                              this.step3Part1Form.bankNumber.slice(-4)

              }
            }).catch(() => {
              this.submitLoading = false
            })
          } else {
            this.$message({
              type: 'error',
              message: '有信息未填',
              duration: 3000
            })
          }
        })
      }
    },
    // 提交表单
    submit() {
      if (this.$route?.query?.page === 'change' && this.step3CurrentPart !== 2) { // 变更过来的
        return Promise.resolve()
      } // 否则为添加或编辑
      const {
        agreement,
        limitedLongEffect,
        limited,
        frContactCardEndLongEffect,
        frContactCardEnd,
        ...rest
      } = this.step1Form
      const { contactCardEndLongEffect, contactCardEnd, adContactCorporate, ...adminOperation } = this.step2Form
      const data = {
        ...(limitedLongEffect === true ? { limited: '1' } : { limited }),
        ...(frContactCardEndLongEffect === true ? { frContactCardEnd: '1' } : { frContactCardEnd }),
        ...rest,
        frIsAdmin: this.step1Form.frIsAdmin === true ? 1 : 2, // 是否管理员
        adContactCorporate: this.step2Form.adContactCorporate, // 法人授权委托书
        adminOperation: {
          ...(contactCardEndLongEffect === true ? { contactCardEnd: '1' } : { contactCardEnd }),
          ...adminOperation,
        },
        enterpriseBank: {
          ...this.step3Part1Form,
          ...this.step3Part2Form
        }
      }
      return new Promise((resolve, reject) => {
        // 查看企业是否注册
        if (!this.step1Form.enterpriseName) {
          reject()
          this.$message({
            type: 'error',
            message: '企业基本信息未填'
          })
          return
        }
        if (this.enterpriseId) {
          addCompany(data).then((res) => {
            this.companyMsgObj = res.data
            resolve()
          }).catch((error) => {
            reject()
          })
          return
        }
        enterpriseCheck({
          enterpriseName: this.step1Form.enterpriseName,
          creditCode: this.step1Form.creditCode,
        }).then((res) => {
          return res
        }).then(() => {
          addCompany(data).then((res) => {
            this.companyMsgObj = res.data
            resolve()
          }).catch(() => {
            reject()
          })
        }).catch(() => {
          reject()
        })
      })
    },
    // 保存
    save() {
      this.saveLoading = true
      this.submit('save').then(() => {
        this.saveLoading = false
        this.$message({
          type: 'success',
          message: '保存成功'
        })
      }).catch(() => {
        this.saveLoading = false
        this.$message({
          type: 'error',
          message: '保存失败'
        })
      })
    },
    // 去往审核结果页面
    gotoCompanyMsgPage() {
      this.$router.push({
        path: '/authenticate/result'
      })
    },
  }
};
</script>

<style scoped lang="scss">
@import '@/assets/styles/px2rem.scss';
@import "@/assets/styles/variables.scss";
.authenticate_step_page {
  background-color: #f1f3f7;
  padding-bottom: px2rem(24);
  background: url('../../assets/authenticate/add_bg.png') no-repeat 0 0;
  background-size: 100% auto;
  .page_content {
    width: px2rem(1400);
    margin: 0 auto;
    .step_list {
      display: flex;
      justify-content: center;
      padding: px2rem(86) 0;
      .step_item {
        display: flex;
        .number_box {
          width: px2rem(64);
          height: px2rem(102);
          position: relative;
          .img {
            display: block;
            margin: 0 auto;
            width: px2rem(64);
          }
          .name {
            text-align: center;
            color: rgba(0, 0, 0, 0.4);
            font-size: px2rem(20);
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: px2rem(140);
          }
        }
        .line {
          width: px2rem(220);
          height: px2rem(2);
          background-color: rgba(0, 0, 0, 0.2);
          margin: px2rem(32) px2rem(12) auto;
          &.blue {
            background-color: $theme;
          }
        }
        &.active {
          .name {
            color: $theme;
          }
        }
      }
    }
    .container {
  }
    .mod {
      background: #fff;
      box-shadow: 0 px2rem(2) px2rem(6) 0 rgba(1, 24, 70, 0.1);
      border-radius: px2rem(6);
      margin-bottom: px2rem(16);
      // padding: px2rem(20) px2rem(20) 0;
      &:last-child {
        margin-bottom: 0;
      }
      .title {
        color: #333;
        font-size: 14PX;
        font-weight: 600;
        display: flex;
        align-items: center;
        padding: px2rem(20) px2rem(20) 0;
        margin-bottom: px2rem(40);
        .icon {
          display: block;
          width: 3PX;
          height: 16PX;
          background-color: $theme;
          margin-right: px2rem(5);
        }
      }
      .content {
        .limited_line {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .limited_checkbox {
            margin-left: px2rem(20);
          }
        }
        .upload_box {
          margin-bottom: px2rem(20);
          margin-left: px2rem(120);
          margin-right: px2rem(80);
          display: flex;
          ::v-deep .el-form-item {
            margin-bottom: 0;
          }
          .ying_ye_zhi_zhao,
          .ID_top,
          .ID_back,
          .sign_template {
            width: px2rem(280);
            height: px2rem(176);
          }
          .pdf {
            width: px2rem(165);
            height: px2rem(165);
          }
          .ying_ye_zhi_zhao,
          .ID_top,
          .ID_back,
          .sign_template,
          .pdf {
            border-radius: px2rem(5);
            margin-right: px2rem(40);
            position: relative!important;
            z-index: 2;
            .upload_input {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              z-index: 2;
              opacity: 0;
            }
            .img {
              display: block;
              width: 100%;
              height: 100%;
            }
            .mask {
              display: none;
            }
            &:hover {
              .mask {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                color: #fff;
                font-size: px2rem(30);
                font-weight: 600;
                .preview,
                .delete {
                  cursor: pointer;
                }
              }
            }
          }
          .ying_ye_zhi_zhao {
            background: #e0f0ff
              url("../../assets/authenticate/yingyezhizhao.jpg") no-repeat 0 0;
            background-size: 100% 100%;
            &:hover {
              background: #e0f0ff
                url("../../assets/authenticate/yingyezhizhao_hover.jpg")
                no-repeat 0 0;
              background-size: 100% 100%;
            }
          }
          .ID_top {
            margin-right: px2rem(30);
            background: #e0f0ff url("../../assets/authenticate/ID.jpg")
              no-repeat 0 0;
            background-size: 100% 100%;
            &:hover {
              background: url("../../assets/authenticate/ID_hover.jpg")
                no-repeat 0 0;
              background-size: 100% 100%;
            }
          }
          .ID_back {
            margin-right: px2rem(44);
            background: #e0f0ff url("../../assets/authenticate/ID_back.jpg")
              no-repeat 0 0;
            background-size: 100% 100%;
            &:hover {
              background: #e0f0ff
                url("../../assets/authenticate/ID_back_hover.jpg") no-repeat 0 0;
              background-size: 100% 100%;
            }
          }
          .sign_template {
            background: #e0f0ff url("../../assets/authenticate/sign.jpg")
              no-repeat 0 0;
            background-size: 100% 100%;
            &:hover {
              background: #e0f0ff
                url("../../assets/authenticate/sign_hover.jpg") no-repeat 0 0;
              background-size: 100% 100%;
            }
          }
          .desc_box {
            padding-top: px2rem(20);
            .desc_name {
              color: #333;
              font-size: px2rem(14);
              font-weight: 600;
              margin-bottom: px2rem(14);
            }
            .desc_text {
              color: #555;
              font-size: px2rem(16);
              line-height: px2rem(24);
              height: px2rem(72);
            }
          }
          .signature_template {
            color: #333;
            font-size: px2rem(18);
            font-weight: 600;
            margin-top: px2rem(24);
            margin-right: px2rem(20);
            display: flex;
            align-items: center;
            .download_template {
              .download_btn {
                color: $theme;
                font-size: px2rem(18);
                font-weight: 600;
                margin-left: px2rem(20);
                .icon {
                  color: $theme;
                  margin-right: px2rem(4);
                }
              }
            }
          }
        }
        .tips {
          height: px2rem(32);
          line-height: px2rem(32);
          color: #f29c1c;
          font-size: px2rem(13);
          background-color: #fffaf4;
          border-radius: px2rem(2);
          padding: 0 px2rem(16);
          display: flex;
          align-items: center;
          margin-left: px2rem(120);
          margin-bottom: px2rem(30);
          margin-right: px2rem(80);
          .icon {
            font-size: px2rem(14);
            color: #f29c1c;
            margin-right: px2rem(8);
          }
        }
        .company_base_msg_form {
          padding-left: px2rem(60);
          padding-right: px2rem(80);
          ::v-deep .el-form-item--medium .el-form-item__label {
            width: 160PX;
            padding: 0;
            margin-right: px2rem(10);
            color: #777;
            font-size: 14PX;
          }
          ::v-deep .el-form-item--medium .el-form-item__content {
            margin-left: 170PX;
          }
          ::v-deep .el-input__inner {
            font-size: 14PX;
            color: #333;
          }
          .select_province_city {
            display: flex;
            justify-content: space-between;
          }
        }
        .fr_is_admin {
          margin-left: px2rem(120);
        }
      }
      .no_style_content {
        .company_base_msg_form {
          margin-top: px2rem(60);
          ::v-deep .el-form-item--medium .el-form-item__label {
            width: 90PX;
            padding: 0;
            margin-right: px2rem(10);
            color: #777;
            font-size: 14PX;
          }
          ::v-deep .el-form-item--medium .el-form-item__content {
            margin-left: 100PX;
          }
          .small_btn {
            margin-left: px2rem(20);
          }
        }
        .big_tips {
          height: px2rem(100);
          background-color: #fffaf4;
          border-radius: px2rem(2);
          display: flex;
          justify-content: center;
          align-items: center;
          color: #f29c1c;
          font-size: px2rem(14);
          margin: 0 px2rem(20) px2rem(20);
          .icon {
            font-size: px2rem(40);
            margin-right: px2rem(10);
          }
          .theme_color {
            color: $theme;
          }
          .text {
            line-height: px2rem(20);
          }
        }
      }
      .wait_content {
        padding: px2rem(80) 0;
        .wait_img {
          display: block;
          width: px2rem(160);
          height: px2rem(160);
          margin: 0 auto;
        }
        .wait_title {
          color: $theme;
          font-size: px2rem(36);
          font-weight: 600;
          text-align: center;
          margin-top: px2rem(40);
        }
        .wait_desc {
          color: #999;
          font-size: px2rem(20);
          font-weight: 500;
          text-align: center;
          margin-top: px2rem(16);
        }
        .btns {
          margin-top: px2rem(40);
          .btn {
            width: px2rem(248);
          }
        }
      }
    }
    .select_company_type {
      .company_type_list {
        display: flex;
        justify-content: center;
        padding-top: px2rem(8);
        padding-bottom: px2rem(48);
        ::v-deep .el-form-item {
          margin-bottom: 0;
        }
        .radio_group {
          display: flex;
          justify-content: space-around;
          .company_type_item {
            display: flex;
            align-items: center;
            width: px2rem(230);
            height: px2rem(80);
            line-height: 80;
            border: px2rem(1) solid #ddd;
            border-radius: px2rem(8);
            padding-left: px2rem(24);
            &:last-child {
              margin-right: 0;
            }
            &.active {
              border: px2rem(1) solid $theme;
              background-color: #f4faff;
            }
            .radio {
              margin-right: px2rem(10);
              &.active {
                color: $theme;
                font-size: px2rem(20);
                font-weight: 500;
              }
            }
          }
        }
      }
    }
    .prev_and_next_step {
      padding: px2rem(30);
      .agreement_box {
        display: flex;
        justify-content: center;
      }
      ::v-deep .el-checkbox {
        margin-right: px2rem(6);
      }
      .agree_checkbox {
        font-size: px2rem(14);
        .text {
          color: #999;
        }
      }
      .agreement {
        color: $theme;
      }
      .btns {
        display: flex;
        justify-content: center;
        .btn_prev {
          margin-right: px2rem(40);
        }
      }
    }
  }
}
.w_400 {
  width: px2rem(400);
}
.font_size_16 {
  font-size: px2rem(16);
}
.p_b_18 {
  padding-bottom: px2rem(18);
}
.p_b_40 {
  padding-bottom: px2rem(40);
}
</style>
